import React, { Component } from 'react'
import { Modal, Button, Select, Input ,Form} from 'antd';
import { inject, observer } from 'mobx-react'
const { Option } = Select;
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};
@inject('ybs')
@observer
class GlytableSearch extends Component {
    constructor(){
        super()
        this.state = {
            selectStatusValue:'全部',
            selectJsValue:'全部',
            selectBmValue:'全部',
            inputtext:null,
            visible: false,
            account:'',
            password:'',
            userName:'',
            department:'',
            role:'',
        }
    }
    selectStatusChange=(e)=>{
        console.log(e);
        this.setState({
            selectStatusValue:e
        })
    }
    selectJsChange=(e)=>{
        this.setState({
            selectJsValue:e
        })
    }
    selectBmChange=(e)=>{
        this.setState({
            selectBmValue:e
        })
    }
    inputChange=(e)=>{
        console.log(e.target.value);
        this.setState({
            inputtext: e.target.value
        })
    }
    kidSearch=()=>{
        console.log('搜索');
    }
    reset=()=>{
        console.log('重置');
    }

    //modol
    selectChange=()=>{
        console.log(1);
    }
    modalCancel=()=>{
        this.setState({
            visible:false
        })
    }
    onFinish = values => {
        console.log(3);
        console.log(values);
    }
    addguanliyuan=()=>{
        this.setState({
            visible:true
        })
    }
    bianjibtn=()=>{
        this.setState({
            visible:false
        })
        let obj = {}
        obj.account=this.state.account;
        obj.password=this.state.password;
        obj.userName=this.state.userName;
        obj.department=this.state.department;
        obj.role=this.state.role;
        obj.LastLogin='无';
        obj.state ='正常'
        this.props.ybs.addGlyData(obj)
    }
    accountChange=(e)=>{
        this.setState({
            account:e.target.value
        })
    }
    passwordChange=(e)=>{
        this.setState({
            password:e.target.value
        })
    }
    nameChange=(e)=>{
        this.setState({
            userName:e.target.value
        })
    }
    bumenChange=(e)=>{
        this.setState({
            department:e
        })
    }
    jueseChange=(e)=>{
        this.setState({
            role:e
        })
    }
    render() {
        return (
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 0 10px' }}>
                <div>
                    <Button onClick={this.addguanliyuan} type='primary'>添加管理员</Button>
                </div>
                <div style={{ width: '850px' }}>
                    <span className='spanStyle'>状态</span>
                    <Select value={this.state.selectStatusValue} style={{ width: 120 }} onChange={this.selectStatusChange}>
                        <Option value="全部">全部</Option>
                        <Option value="正常">正常</Option>
                        <Option value="已删除">已删除</Option>
                    </Select>
                    <span className='spanStyle'>角色</span>
                    <Select value={this.state.selectJsValue} style={{ width: 120 }} onChange={this.selectJsChange}>
                        <Option value="全部">全部</Option>
                        <Option value="超级管理员">超级管理员</Option>
                        <Option value="楼盘编辑">楼盘编辑</Option>
                    </Select>
                    <span className='spanStyle'>部门</span>
                    <Select value={this.state.selectBmValue} style={{ width: 120 }} onChange={this.selectBmChange}>
                        <Option value="全部">全部</Option>
                        <Option value="新房编辑部">新房编辑部</Option>
                        <Option value="运营部">运营部</Option>
                    </Select>
                    <Input onChange={this.inputChange} value={this.state.inputtext} style={{ width: '20%' }} placeholder='请输入账号' />
                    <Button onClick={this.kidSearch}>搜索</Button>
                    <Button onClick={this.reset}>重置</Button>
                </div>
                <Modal
                    title="编辑"
                    visible={this.state.visible}
                    onCancel={this.modalCancel}
                    footer={[
                        <Button type='primary' key="queding" onClick={this.bianjibtn}>
                            确定
                        </Button>,
                        <Button key="back" onClick={this.modalCancel}>
                            取消
                        </Button>
                    ]}
                >
                    <Form {...layout}  onFinish={this.onFinish} >
                        <Form.Item  label="账号" >
                            <Input value={this.state.account} onChange={this.accountChange} />
                        </Form.Item>
                        <Form.Item  label="密码">
                            <Input value={this.state.password} onChange={this.passwordChange}  />
                        </Form.Item>
                        <Form.Item label="姓名">
                            <Input value={this.state.userName} onChange={this.nameChange} />
                        </Form.Item>
                        <Form.Item  label="所属编辑部" >
                            <Select value={this.state.department} style={{ width: 120 }} onChange={this.bumenChange}>
                                <Option value="新房编辑部">新房编辑部</Option>
                                <Option value="运营部">运营部</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item  label="所属角色">
                            <Select value={this.state.role} style={{ width: 120 }} onChange={this.jueseChange}>
                                <Option value="超级管理员">超级管理员</Option>
                                <Option value="管理员">管理员</Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
export default GlytableSearch